<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta name="description" content="" /> 
  <meta name="keywords" content="" />
  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/css/iconfont.css">
  <script src="/js/jquery.min.js"></script>
  <script src="/js/public.js"></script>
  <script src="/js/js.js"></script>
  <script src="/js/bookdetail.js"></script>
  <script type="text/javascript">
    $(function(){
      $("#indexPage").on("click", function(){
        $(this).fadeOut("slow", function(){
          $(this).off("click");
        });
      });

      setTimeout(function(){
        $("#indexPage").fadeOut("slow", function(){
          $(this).off("click");
        });
      }, 3000)

    });
  </script>
</head>
<body>
<input id="collList" type="hidden" value="{{$collectList}}">
@if(count($page)>0)
  @if($page==0)
    <div id="indexPage" class="index-page">
      <div class="photo-box">
        <img class="index-photo" src="images/index-img.png" alt="">
      </div>
      <div class="web-name-box">
        <img src="/images/web-name.png" alt="">
      </div>
    </div>
    @endif
@endif

<div class="container">
  <div class="info-bar clearfix">

    <p class="date-box l">橙色星期三<span class="pub-date"><?php //echo date('Y年m月d日', time())?></span></p>
    <p class="btn-group r">
      <a href="search.html" class="search-btn"><img src="/images/search.png" alt=""></a>
      <a href="javascript:;" id="book-menu" class="book-menu"><img src="/images/menu.png" alt=""></a>
    </p>
  </div>
  <div class="container">
    <div class="book-list-box">

     @if(count($entBookInfohot)>0)
       @if($entBookInfohot->IsGratis==1)
          <div class="hot-book clearfix">
            <div class="book-info">
              <p class="book-action">
                  <span class="v-mid">
                      <a class="book-list-detail to-video" href="/bookdetail/{{$entBookInfohot->BookID}}.html"><img src="/images/watch.png" alt=""></a><br/>
                      <a class="book-list-detail to-audio" href="/audiodetail/{{$entBookInfohot->BookID}}.html"><img src="/images/listen.png" alt=""></a><br/>
                      <input id="coll_{{$entBookInfohot->BookID}}" onclick="ajaxjsonBookCollect({{$entBookInfohot->BookID}});" name="collect" type="button" class="collect-book"/>
                  </span>
                <i class="buwei"></i>
              </p>
              <p class="info-text">
                {{$entBookInfohot->BookDesc}}
              </p>
            </div>
            <div class="book-img">
              <img src="{{$entBookInfohot->FilePath1}}" alt="">
            </div>
          </div>
         @endif
       @endif
      <ul class="book-list">
        @foreach($entBookInfo as $data)
          @if($data->IsGratis==1)
          <li>
            <div class="book-item">
              <div class="book-info clearfix">
                <p class="info-text">
                  {{$data->BookDesc}}
                </p>
                <p class="book-action">
                  <a class="book-list-detail to-video" href="/bookdetail/{{$data->BookID}}.html"></a>
                  <a class="book-list-detail to-audio" href="/audiodetail/{{$data->BookID}}.html"></a>
                  <input id="coll_{{$data->BookID}}" name="collect"  onclick="ajaxjsonBookCollect({{$data->BookID}});" type="button" class="collect-book"/>
                </p>
              </div>
              <div class="book-img">
                <img src="{{$data->FilePath1}}" alt="">
              </div>
            </div>
          </li>
          @endif
        @endforeach
      </ul>
    </div>
  </div>
  <!--底部-->
  {{--@include('controller.footer')--}}

</div>
<div class="mask">
  <div class="slide-class-box">
    <div class="slide-class-head clearfix">
      <h3 class="">代读类别</h3>
      <span id="selAllClass" class="class-sel-all">全部</span>
      <a class="sel-ok" id="selOk" href="javascript:;">完成</a>
    </div>
    <div class="slide-class-container">
      <ul id="classBox" class="class-item-box clearfix">
        @if(count($entBookType)>0)
          @foreach($entBookType as $dataBookType)
            <li><a data-id="{{$dataBookType->TypeID}}">{{$dataBookType->TypeName}}</a></li>
          @endforeach
        @endif
        {{--<li class="act"><a>历史传奇</a></li>--}}
      </ul>
    </div>
  </div>
</div>
<script>
  $(function(){
    var H = 0,
            goBackObj = null;
    $(".book-item .book-img img")[0].onload = function(){
      H = $(this).height();
      $(".book-list .book-item").each(function(){
        setH($(this), H);
      })
    };

    $(window).resize(function(){
      H = $(".book-item .book-img img").eq(0).height();
      $(".book-list .book-item").each(function(){
        setH($(this), H);
      })
    })

    $(".book-list-box .book-img").click(function(e){
      var initInfo = {
                left : 0, //图片的属性
                top: 0, //图片的属性
                opacity: 0 //信息的属性
              },
              lef = 0,
              top = 0;
      if($(this).closest(".hot-book").length){
        var _clientW = document.documentElement.offsetWidth || document.body.offsetWidth;
        //不能用百分比
        lef = 0.20266666667 * _clientW + 'px';
      }else if($(this).closest(".book-list").length){
        top = $(this).siblings(".book-info").height();
      }
      $(this).animate({
        left : lef,
        top  : top
      }, 300).siblings(".book-info").animate({opacity : 1});
      //阻止默认时间
      stopPro(e);
      //还原
      goBack.call(null, goBackObj, initInfo);
      $("body").on("click",goBack.bind(null, $(this).siblings(".book-info").eq(0), initInfo));
      goBackObj = $(this).siblings(".book-info").eq(0);

    });

    //选择代读类别
    selClass();
    $(".collect-book").click(function(e){
                $(this).toggleClass("act");
                stopPro(e);
              })
  })

</script>
</body>
</html>